<template>
	<view>
		<view class="top">
			<u-navbar title-color="#fff" :borderBottom="false" titleColor="#000000" title="" back-icon-color="#000000"
				:background="background"></u-navbar>

			<image class="top_bg1" src="../static/blind_bg4.png"></image>
			<image class="top_bg2" src="../static/blind_bg3.png"></image>

		</view>
		<view class="content">
			<view class="box1">
				<view class="title">
					<view class="yuan">01</view>
					随机再送一件
				</view>
				<view class="con">
					<view class="list">
						<view class="v1">
							<image class="image1" src="../static/blind_bg5.png"></image>
						</view>
						<view class="v2"><text>{{ sweet_coin }}</text>蜜贝</view>
						<view class="but" v-if="getKmbStatus == 0" @click="receive_but()">点击领取</view>
						<view class="bot" v-if="getKmbStatus == 1">
							<image src="../static/blind_bg13.png"></image>
						</view>
					</view>
					<view class="list"  v-for="(item,index) in list1" :key="index">
						<view class="v1">
							<image class="image2" :src="img_pre + item.icon"></image>
						</view>
						<view class="v2">{{ item.title }}</view>
						<view class="v3">￥{{ item.price }}</view>
					</view>

				</view>
			</view>

			<view class="box2">
				<view class="title">
					<view class="yuan">02</view>
					完成新手任务
					<view class="progress">
						<text>已完成</text>
						{{ progress }}%
					</view>
				</view>
				<view class="con">
					<view class="list">
						<view class="list1">
							<image src="../static/blind_bg7.png"></image>
						</view>
						<view class="list2">
							<view class="list2-1">头像昵称</view>
							<view class="list2-2" v-if="upload_icon_satus == 0"
								@click="toPage('../../htmlA/setting/basic')">点击完善</view>
							<view class="list2-2 list2-act" v-if="upload_icon_satus == 1">已完善</view>
						</view>
					</view>
					<view class="list">
						<view class="list1">
							<image src="../static/blind_bg8.png"></image>
						</view>
						<view class="list2">
							<view class="list2-1">收款码</view>
							<view class="list2-2" v-if="collection_pictures_satus == 0"
								@click="toPage('../../htmlA/setting/collection')">点击完善</view>
							<view class="list2-2 list2-act" v-if="collection_pictures_satus == 1">已完善</view>
						</view>
					</view>
					<view class="list">
						<view class="list1">
							<image src="../static/blind_bg9.png"></image>
						</view>
						<view class="list2">
							<view class="list2-1">收货地址</view>
							<view class="list2-2" v-if="receiving_address_satus == 0"
								@click="toPage('../../htmlA/address/index')">点击完善</view>
							<view class="list2-2 list2-act" v-if="receiving_address_satus == 1">已完善</view>

						</view>
					</view>
					<view class="list">
						<view class="list1">
							<image src="../static/blind_bg14.png"></image>
						</view>
						<view class="list2">
							<view class="list2-1">抢拍生鲜蜂巢</view>
							<view class="list2-2" v-if="go_buy_status == 0">未达成</view>
							<view class="list2-2 list2-act" v-if="go_buy_status == 1">已达成</view>

						</view>
					</view>

				</view>
			</view>

		</view>

		<view class="bottom">
			<!-- <image class="image1" src="../static/blind_bg2.png"></image> -->
			<view class="text">
				<text class="text1">完成所有任务</text><text class="text2">解锁新人专属好礼</text>
			</view>

			<view class="button" v-if="progress == 100 && go_buy_status == 1"
				@click="toPage('/pages/htmlH/blind/share?state=1')">
				免费领取
			</view>

			<view class="button color_hui" v-else @click="go_but()">
				免费领取
			</view>

			<!-- <image class="image2" src="../static/tb2.png" v-if="progress == 100 && swith_status == 1" @click="toPage('/pages/htmlH/blind/share?state=1')"></image>
			<image class="image2" src="../static/blind_bg1.png" v-else @click="go_but()"></image> -->

		</view>

	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				list1: [],
				sweet_coin: 0,
				upload_icon_satus: 0,
				collection_pictures_satus: 0,
				receiving_address_satus: 0,
				invite_status: 0,
				progress: 0,
				swith_status: 0,
				getKmbStatus: 0,
				getstatus: 0,
				go_buy_status: 0,
			}
		},
		onLoad(option) {
			than = this;
			than.list_fun()
			than.post('api/Gashapon/manorSecondStatus', null, function(data) {
				console.log(data, "aaaa")
				than.swith_status = data.swith_status

			})
		},
		onReady: function(e) {

		},
		onReachBottom() {

		},
		methods: {
			list_fun() {
				than.post("api/share/userShareDetails", null, function(data) {

					console.log(data,"bbb")
					than.sweet_coin = data.sweet_coin
					than.list1 = data.giftlist
					than.upload_icon_satus = data.upload_icon_satus
					than.collection_pictures_satus = data.collection_pictures_satus
					than.receiving_address_satus = data.receiving_address_satus
					than.invite_status = data.invite_status
					than.getstatus = data.getstatus
					than.getKmbStatus = data.getKmbStatus
					than.go_buy_status = data.go_buy_status
					

					var num = than.upload_icon_satus + than.collection_pictures_satus + than
						.receiving_address_satus + than.go_buy_status
					console.log(num)
					if (num == 4) {
						than.progress = 100
					} else if (num == 3) {
						than.progress = 75
					} else if (num == 2) {
						than.progress = 50
					} else if (num == 1) {
						than.progress = 25
					} else if (num == 0) {
						than.progress = 0
					}
					console.log(than.progress,"aaa")
				})
			},
			go_but() {
				than.toast('未完成新手任务')
			},
			receive_but() {
				than.post("api/share/getKmb", {}, function(data) {
					than.toast('领取成功')
					than.list_fun()
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #FAFAFA;
	}

	.top {
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef H5 */
		padding-top: 60rpx;
		/* #endif */
		height: 320rpx;
		position: relative;
		background: #FFD100;
		background-size: 100% 100%;

		.top_bg1 {
			position: absolute;
			width: 387rpx;
			height: 116rpx;
			left: 60rpx;
			bottom: 100rpx;
		}

		.top_bg2 {
			position: absolute;
			width: 242rpx;
			height: 148rpx;
			right: 30rpx;
			bottom: 50rpx;
		}
	}

	.content {
		position: relative;
		z-index: 1;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx;
		margin-top: -60rpx;
		background-color: #FAFAFA;

		.box1 {
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;

				// padding:30rpx 0rpx;
				// padding-top: 0rpx;
				.yuan {
					width: 64rpx;
					height: 64rpx;
					background: #F6C749;
					border-radius: 50%;
					text-align: center;
					line-height: 64rpx;
					color: white;
					margin-right: 20rpx;
				}
			}

			.con {
				display: flex;
				flex-flow: wrap;

				.list:nth-child(1) {
					margin-left: 0rpx;
					background-color: #E7ECFD;

					.but {
						width: 120rpx;
						height: 48rpx;
						background: linear-gradient(-90deg, #FFA256, #FE3C33);
						border-radius: 24rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 48rpx;
						margin: auto;
						margin-top: 8rpx;
					}

					.v2 {
						text {
							color: #FF2D01;
							margin-right: 10rpx;
						}
					}
				}

				.list:nth-child(4) {
					margin-left: 0rpx;
				}

				.list:nth-child(2) {
					background: #E1F6FF !important;
				}

				.list:nth-child(3) {
					background: #FFF6E3 !important;
				}

				.list:nth-child(4) {
					background: #E1FFF8 !important;
				}

				.list:nth-child(5) {
					background: #F1F1F1 !important;
				}

				.list:nth-child(6) {
					background: #FFEBEC !important;
				}

				.list {
					position: relative;

					.bot {
						position: absolute;
						bottom: 0;
						right: 0;

						image {
							width: 97rpx;
							height: 92rpx;
						}
					}

					width: calc(100%/3 - 22rpx);
					margin-left:30rpx;
					background-color: white;
					// height:210rpx;
					border-radius: 20rpx;
					padding:10rpx 20rpx;
					text-align: center;
					margin-top:30rpx;

					.v1 {
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.image1 {
							width: 77rpx;
							height: 79rpx;
							border-radius: 50%;
						}

						.image2 {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.v2 {
						font-size: 26rpx;
						font-weight: bold;
						color: #39383D;
						margin-top: 5rpx;
					}

					.v3 {
						font-size: 24rpx;
						font-weight: bold;
						margin-top: 10rpx;
						color: #FE7725;
					}
				}
			}
		}
	}

	.box2 {
		padding-top: 30rpx;
		margin-bottom: 160rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;

			.yuan {
				width: 64rpx;
				height: 64rpx;
				background: #F68649;
				border-radius: 50%;
				text-align: center;
				line-height: 64rpx;
				color: white;
				margin-right: 20rpx;
			}

			.progress {
				margin-left: 10rpx;
				// width: 175rpx;
				padding: 0rpx 15rpx;
				height: 49rpx;
				text-align: center;
				background: #E9EDFF;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #FE344C;
				line-height: 49rpx;

				text {
					padding-right: 10rpx;
					color: #3476FE;
				}
			}
		}

		.con {
			display: flex;
			flex-flow: wrap;

			.list:nth-child(1) {
				margin-left: 0rpx;
			}

			.list:nth-child(3) {
				margin-left: 0rpx;
			}

			.list {
				width: calc(100%/2 - 16rpx);
				margin-left: 30rpx;
				background-color: white;
				height: 144rpx;
				border-radius: 20rpx;
				padding: 10rpx 20rpx;
				margin-top: 30rpx;
				display: flex;

				.list1 {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 52rpx;
						height: 52rpx;
					}
				}

				.list2 {
					flex: 1;
					padding: 20rpx 20rpx;

					.list2-1 {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
					}

					.list2-2 {
						font-size: 24rpx;
						font-weight: 500;
						color: #F46813;
						margin-top: 10rpx;
					}

					.list2-act {
						font-size: 24rpx;
						font-weight: 500;
						color: #3270FF;
					}
				}

			}
		}
	}

	.bottom {
		position: fixed;
		z-index: 3;
		left: 0;
		right: 0;
		// #ifdef H5
		bottom: 0rpx;
		// #endif
		// #ifdef APP-PLUS
		bottom: 0rpx;
		// #endif
		// width: 678rpx;
		// margin: auto;
		height: 120rpx;
		display: flex;
		align-items: center;
		background-color: white;
		padding: 0rpx 40rpx;

		.image1 {
			width: 57rpx;
			height: 49rpx;
		}

		.image2 {
			width: 69rpx;
			height: 69rpx;
		}

		.button {
			width: 180rpx;
			height: 64rpx;
			background: linear-gradient(-90deg, #FFA256, #FE3C33);
			border-radius: 20rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 64rpx;
			text-align: center;
			margin-left: 20rpx;
		}

		.color_hui {
			background: #999999;
		}

		.text {
			// flex:1;
			margin-left: 20rpx;
			font-size: 30rpx;

			.text1 {
				color: #333333;
				font-weight: bold;
			}

			.text2 {
				color: #FF2D01;
				font-weight: bold;
			}
		}

	}
</style>
